﻿@page "/range-slider/limits"

@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.Buttons;
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of Slider component with limits. Drag the thumb over the bar for selecting the values between assigned limit values.</p>
</SampleDescription>
<ActionDescription>
   <p>The limits are used to limit between certain range. When the limits are assigned, draggable limited area will be in the dark shadow color of the current theme. The limits APIs are explained below.</p>
      <ul>
        <li><code>MinStart</code>	-   Used to set minimum limit value for first handle.</li>
        <li><code>MinEnd</code>	-   Used to set maximum limit value for first handle.</li>
        <li><code>MaxStart</code>	-   Used to set minimum limit value for second handle.</li>
        <li><code>MaxEnd</code>	-   Used to set maximum limit value for first handle.</li>
        <li><code>StartHandleFixed</code>	-   Used to lock the first handle in the current position.</li>
        <li><code>EndHandleFixed</code>	-   Used to lock the second handle in the current position.</li>
      </ul>
        In this demo, Limits with MinRange and Range Slider is demonstrated.
       <ul>
         <li>MinRange Slider – In this sample, the minimum and maximum limit of the slider is set to 10 and 40 respectively.</li>
         <li>Range Slider – In this sample, the minimum and maximum limit of the first handle is set to 10 and 40 respectively and the minimum and maximum limit of the second handle is set to 60 and 90 respectively.</li>
       </ul>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <div class="content-wrapper">
        <div class='sliderwrap'>
            <label class="userselect">MinRange Slider With Limits</label>
            <SfSlider @bind-Value="@Default" Min="0" Max="100" Type=SliderType.MinRange>
                <SliderTicks Placement="@Placement.Before" LargeStep="20" SmallStep="5" ShowSmallTicks="true"></SliderTicks>
                <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" ShowOn="@TooltipShowOn.Focus"></SliderTooltip>
                <SliderLimits Enabled="true"
                                 MinStart="@CurrentMinStart"
                                 MinEnd="@CurrentMinEnd"
                                 StartHandleFixed="@LockFirstHandle"></SliderLimits>
            </SfSlider>
        </div>
        <div class='sliderwrap'>
            <label class="userselect">Range Slider With Limits</label>
            <SfSlider @bind-Value="@Range" Min="0" Max="100" Type=SliderType.Range>
                <SliderTicks Placement="@Placement.Before" LargeStep="20" SmallStep="5" ShowSmallTicks="true"></SliderTicks>
                <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" ShowOn="@TooltipShowOn.Focus"></SliderTooltip>
                <SliderLimits Enabled="true"
                                 MinStart="@CurrentMinStart"
                                 MinEnd="@CurrentMinEnd"
                                 MaxStart="@CurrentMaxStart"
                                 MaxEnd="@CurrentMaxEnd"
                                 StartHandleFixed="@LockFirstHandle"
                                 EndHandleFixed="@LockSecondHandle"></SliderLimits>
            </SfSlider>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section property-custom">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div><div class="property-panel-content">
            <table id="property" title="Properties" class="property-panel-table">
                <tbody>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">MinStart</div>
                        </td>
                        <td style="width: 50%">
                            <SfNumericTextBox TValue="int?" Value="@CurrentMinStart" Min="0" Max="100">
                                <NumericTextBoxEvents TValue="int?" ValueChange="(e => { CurrentMinStart = (int)e.Value; })"></NumericTextBoxEvents>
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">MinEnd</div>
                        </td>
                        <td style="width: 50%">
                            <SfNumericTextBox TValue="int?" Value="@CurrentMinEnd" Min="0" Max="100">
                                <NumericTextBoxEvents TValue="int?" ValueChange="(e => { CurrentMinEnd = (int)e.Value; })"></NumericTextBoxEvents>
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">MaxStart</div>
                        </td>
                        <td style="width: 50%">
                            <SfNumericTextBox TValue="int?" Value="@CurrentMaxStart" Min="0" Max="100">
                                <NumericTextBoxEvents TValue="int?" ValueChange="(e => { CurrentMaxStart = (int)e.Value; })"></NumericTextBoxEvents>
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">MaxEnd</div>
                        </td>
                        <td style="width: 50%">
                            <SfNumericTextBox TValue="int?" Value="@CurrentMaxEnd" Min="0" Max="100">
                                <NumericTextBoxEvents TValue="int?" ValueChange="(e => { CurrentMaxEnd = (int)e.Value; })"></NumericTextBoxEvents>
                            </SfNumericTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Lock First Handle</div>
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox @bind-Checked="@LockFirstHandle"></SfCheckBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%">
                            <div class="userselect">Lock Second Handle</div>
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox @bind-Checked="@LockSecondHandle"></SfCheckBox>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    int Default = 25;
    int[] Range = { 25, 75 };
    int CurrentMinStart = 10;
    int CurrentMinEnd = 40;
    int CurrentMaxStart = 60;
    int CurrentMaxEnd = 90;
    bool LockFirstHandle = false;
    bool LockSecondHandle = false;
}

<style>
    .content-wrapper {
        width: 52%;
        margin: 0 auto;
        min-width: 185px;
    }
    .sliderwrap {
        margin-top: 45px;
    }
    .e-bigger .content-wrapper {
        width: 80%;
    }
    .sliderwrap label {
        padding-bottom: 50px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
    }
    .userselect {
        -webkit-user-select: none;
        /* Safari 3.1+ */
        -moz-user-select: none;
        /* Firefox 2+ */
        -ms-user-select: none;
        /* IE 10+ */
        user-select: none;
        /* Standard syntax */
    }
    .property-custom td {
        padding: 5px;
    }
</style>
